<template>
  <div>
    <div id="barLine" ref="barLine" style="height:300px;margin-bottom:16px;"></div>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'BarLine',
  props: {
    chartData: Array
  },
  data () {
    return {
      mychart: {}
    }
  },
  mounted () {
    this.initChart()
    window.addEventListener('resize', () => {
      setTimeout(() => {
        this.mychart.resize()
      }, 500)
    })
  },
  watch: {
    chartData (newVal, oldVal) {
      this.initChart()
    }
  },
  methods: {
    initChart () {
      this.mychart = echarts.init(this.$refs.barLine)
      const option = {
        backgroundColor: 'rgb(12,16,61)',
        // title: {
        //   text: '各品牌设备的数量及占比',
        //   top: '16',
        //   left: '16',
        //   textStyle: {
        //     color: '#fff',
        //     fontSize: '14'
        //   }
        // },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            textStyle: {
              color: '#fff'
            }
          }
        },
        grid: {
          borderWidth: 0,
          top: 16,
          bottom: 26,
          right: 0,
          textStyle: {
            color: '#fff'
          }
        },
        calculable: true,
        xAxis: [
          {
            type: 'category',
            axisLine: {
              lineStyle: {
                color: '#90979c'
              }
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitArea: {
              show: false
            },
            axisLabel: {
              interval: 0
            },
            data: ['美的', '格力', '海尔', '史密斯', '赛格', '小米']
          }
        ],
        yAxis: [
          {
            type: 'value',
            splitLine: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#90979c'
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              interval: 0
            },
            splitArea: {
              show: false
            }
          }
        ],
        series: [
          {
            // name: ,
            type: 'bar',
            barMaxWidth: 35,
            barGap: '10%',
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#00FFE3'
                  },
                  {
                    offset: 1,
                    color: '#4693EC'
                  }
                ]),
                label: {
                  show: false,
                  textStyle: {
                    color: '#fff'
                  },
                  position: 'inside',
                  formatter: function (p) {
                    return p.value > 0 ? p.value : ''
                  }
                }
              }
            },
            data: this.chartData
          },
          {
            name: '总数',
            type: 'line',
            symbolSize: 10,
            symbol: 'circle',
            itemStyle: {
              normal: {
                color: 'rgba(252,230,48,1)',
                barBorderRadius: 0,
                label: {
                  show: true,
                  position: 'top',
                  formatter: function (p) {
                    return p.value > 0 ? p.value : ''
                  }
                }
              }
            },
            data: this.chartData
          }
        ]
      }
      this.mychart.setOption(option)
    }
  }
}
</script>

<style lang="less" scoped></style>
